<template>
  <div class="goods_list table-theme">
    <head-title title="商品--商品分类"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
           <select-view
            :option-list="statusList"
            :value="status"
            placeholder="上下架"
            type="status"
            @value="setSelectValue"
          >
          </select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
          <div class="add">
            <el-button type="primary" @click="addGoodsClassify"
              >添加分类</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">总商品数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column
          label="序号"
          align="center"
          prop="class_id"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="class_name"
        ></el-table-column>
        <el-table-column label="主图" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column label="上下架" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="
                upDown(scope.row.status, scope.row.store_id, scope.row.class_id)
              "
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editGoods(scope.row.class_id)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="delGoods(scope.row.class_id, scope.row.store_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="添加分类" :close-on-click-modal="false" :visible.sync="addUserDialog" width="500px" center
		 :modal-append-to-body="false" @close="close">
			 <el-form
        :model="infoForm"
        :rules="infoFormRules"
        ref="infoForm"
        label-width="120px"
      >
        <el-form-item label="分类图片：" prop="factory_name">
          <div class="factory-img-upload">
            <div class="factory-img-upload-btns">
              <el-upload
                action="fakeaction"
                :show-file-list="false"
                :http-request=" function (res) { return upload(res, 1); } "
              >
                <el-button type="primary" size="small">图片</el-button>
              </el-upload>
            </div>
            <div class="factory-img-upload-imgs">
              <el-image :src="infoForm.img">
                <div slot="error"></div>
              </el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="分类名称：" prop="class_name">
            <el-input v-model.trim="infoForm.class_name" placeholder="请输入风格名称" clearable  :style="{width:'300px'}"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="sattus">
          <el-switch v-model="infoForm.status" :active-value="1" :inactive-value="2">
          </el-switch>
        </el-form-item>
      </el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('infoForm')">确 定</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import addGoodsClassify from "@/components/layer-dialog/add-goods-classify.vue";
import SelectView from "@/components/SelectView";
export default {
  data() {
    return {
      total: 0,
      list: [],
      page: 0,
      style_id: "",
      styleList: [],
      class_id: "",
      class_name: "",
      status: 1,
      store_id: localStorage.getItem("store_id"),
      class_id2: "",
      addUserDialog: false,
      infoForm: {
        img: "",
        status: 1,
        class_name:'',
        store_id:localStorage.getItem('store_id'),
      },
       infoFormRules: {
          class_name: [{
						required: true,
						message: '请输入风格名称'
                    }],
       },
       searchOption: [
          {
            value: 0,
            label: "分类名称",
          },
          {
            value: 1,
            label: "分类ID",
          }
        ],
        classSelect: 0,
        selectContent: "",
        statusList:[
          {
            value:1,
            label:'上架'
          },
          {
            value:2,
            label:'下架'
          }
        ]
    };
  },
  methods: {
    editGoods(id) {
        this.$http(this.$ApiList.StoreGoodsClassItems,{class_id:id}).then(res=>{
            this.infoForm.img = res.datas.data[0].img;
            this.infoForm.status = res.datas.data[0].status;
            this.infoForm.class_name = res.datas.data[0].class_name;
            this.infoForm.class_id = res.datas.data[0].class_id;
        })
        this.class_id2 = id;
        this.addUserDialog=true;
    },
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        status: this.status,
        store_id: this.store_id,
      };
      if(this.classSelect == 0 && this.selectContent != ''){
        data.class_name = this.selectContent;
      }else if(this.classSelect == 1 && this.selectContent != ''){
        data.class_id = this.selectContent;
      }
      this.$http(this.$ApiList.StoreGoodsClassItems, data).then((res) => {
        this.list = res.datas.data;
        this.total = res.datas.count;
      });
    },
    // 上下架
    upDown(status, store_id, class_id) {
      let data = {
        status,
        store_id,
        class_id,
      };
      this.$http(this.$ApiList.StoreGoodsClassDown, data).then((res) => {
        this.$layer.msg(res.datas);
        this.init();
      });
    },
    // 风格搜索
    selectType() {},
    // 刷新
    refreshPage() {
      this.page = 0;
      this.selectContent = "";
      this.classSelect = 0
      this.status = '1';
      this.init();
    },
    // 添加分类
    addGoodsClassify() {
        this.addUserDialog = true;
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    delGoods(class_id, store_id) {
      this.$confirm("删除后不可恢复，是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            class_id,
            store_id,
          };
          this.$http(this.$ApiList.DelGoodsClass, data).then((res) => {
            this.$layer.msg(res.datas);
            this.init();
          });
        })
        .catch(() => {});
    },
     upload(params, type) {
      const file = params.file,
        isJPGPNG = file.type === "image/jpeg" || "image/png";
      if (!isJPGPNG) {
        this.$message.error("只能上传图片格式png、jpg!");
        return;
      }
      const form = new FormData();
      form.append("file[]", file);
      this.$http(this.$ApiList.publicUpload, form).then(res => {
				this.infoForm.img = res.datas[0];
	  });
    },
    submitForm(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
                this.$http(this.class_id2?this.$ApiList.UpGoodsClass:this.$ApiList.AddGoodsClass, this.infoForm).then(res => {
                    this.$layer.msg(res.datas);
                    this.addUserDialog = false;
                    this.infoForm.img = '';
                    this.infoForm.status = 1;
                    this.infoForm.class_name = '';
                    this.class_id2 = ''
                    this.init();
                });
            } else {
                this.$layer.msg('请填写完整信息后提交');
            }
        });
    },
    // 关闭
    close(){
        this.class_id2 = '';
        this.infoForm.img = '';
        this.infoForm.status = 1;
        this.infoForm.class_name = ' ';
        this.infoForm.class_id = '';
    },
    setSelectValue(obj){
      const { type,value } = obj
      switch (type) {
        case 'status':
          this.status = value
          break;
      
        default:
          break;
      }
      this.init()
    }
  },
  created() {
    this.init();
  },
  mounted () {
      console.log(this.classSelect)
  },
  components: {
    ImgPopover,
    SelectView
  },
};
</script>

<style lang="scss" scoped>
</style>